<template>
  <div class="table-search" v-if="columns.length">
    <div style="height: 100%">
      <el-form
        class="form_warp"
        ref="formRef"
        :model="searchParam"
        :inline="true"
        style="height: 100%"
        :label-width="labelWidth + 'px'"
      >
        <template v-for="item in topColumns" :key="item.prop">
          <el-form-item
            :label="`${item.label} :`"
            :label-width="item.labelWidth || labelWidth"
          >
            <SearchFormItem :item="item" :searchParam="searchParam"></SearchFormItem>
          </el-form-item>
        </template>
      </el-form>
    </div>
    <div class="search-operation">
      <el-button
        type="primary"
        link
        class="search-isOpen"
        @click="handleSearchShow"
        v-if="state.oneLineLength < props.columns.length"
      >
        {{ searchShow ? "合并" : "展开" }}
        <el-icon class="el-icon--right">
          <component :is="searchShow ? ArrowUp : ArrowDown"></component>
        </el-icon>
      </el-button>
      <el-button class="search_btn" type="primary" :icon="Search" @click="search"
        >搜索</el-button
      >
      <el-button
        v-if="$props.resetbtn"
        class="reset_btn"
        :icon="RefreshLeft"
        @click="reset"
        >重置</el-button
      >
      <slot name="btn"></slot>
    </div>
  </div>
  <div class="bottom_form_warp" :style="{ height: state.bottomFormHeight + 'px' }">
    <el-form
      style=""
      ref="bottomFormRef"
      :model="searchParam"
      :inline="true"
      :label-width="labelWidth + 'px'"
    >
      <template v-for="item in bottomColumns" :key="item.prop">
        <el-form-item
          :label="`${item.label} :`"
          :label-width="item.labelWidth || labelWidth"
        >
          <SearchFormItem :item="item" :searchParam="searchParam"></SearchFormItem>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed } from "vue";
import SearchFormItem from "./SearchFormItem.vue";
import { RefreshLeft, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
const props = defineProps({
  columns: Array,
  searchParam: Object,
  labelWidth: {
    type: [Number, String],
    default: 100,
  },
  resetbtn: {
    type: Boolean,
    default: true,
  },
});
const topColumns = computed(() => {
  if (state.oneLineLength) return props.columns.slice(0, state.oneLineLength);
  return props.columns;
});
const bottomColumns = computed(() => {
  if (state.oneLineLength) return props.columns.slice(state.oneLineLength);
  return [];
});
const formRef = ref(null);
const bottomFormRef = ref(null);
const state = reactive({
  showOpenBtn: false, // 是否展示【展开合并】按钮
  oneLineLength: 0,
  bottomFormHeight: 0,
});
const emit = defineEmits(["search", "reset"]);
const search = () => {
  emit("search");
};
// 是否展开搜索项
const searchShow = ref(false);
const handleSearchShow = () => {
  searchShow.value = !searchShow.value;
  if (searchShow.value) state.bottomFormHeight = bottomFormRef.value.$el.offsetHeight;
  else state.bottomFormHeight = 0;
};
const getVisibleContent = (divElement) => {
  let visibleContent = 0;
  const childNodes = divElement.childNodes;
  for (let i = 0; i < childNodes.length; i++) {
    const child = childNodes[i];
    if (child.nodeType === Node.ELEMENT_NODE) {
      const rect = child.getBoundingClientRect();
      const divRect = divElement.getBoundingClientRect();
      const isVisibleVertically = rect.top < divRect.bottom && rect.bottom > divRect.top;
      const isVisibleHorizontally =
        rect.left < divRect.right && rect.right > divRect.left;

      if (isVisibleVertically && isVisibleHorizontally) {
        visibleContent++;
      }
    }
  }
  return visibleContent;
};

const reset = () => {
  for (let key in props.searchParam) {
    // eslint-disable-next-line vue/no-mutating-props
    props.searchParam[key] = null;
  }
  emit("reset");
};
onMounted(() => {
  state.oneLineLength = getVisibleContent(formRef.value.$el);
});
</script>
<script>
export default {
  name: "SearchForm",
};
</script>
<style lang="scss">
@import "./index.scss";

.table-search {
  height: 50px;
  overflow: hidden;
  transition: all 0.3s;
}
.bottom_form_warp {
  height: 0;
  overflow: hidden;
  transition: all 0.5s;
}
</style>
